23 — 用 Blender 制作自定义模型

Three.js Journey · Bruno Simon · 难度:简单

23 — 用 Blender 制作自定义模型 课程海报

介绍

现在我们知道了如何把模型导入场景,让我们学习如何用一个 3D 软件创建我们自己的模型。

选择软件

有很多软件,比如 Cinema 4D、Maya、3DS Max、Blender、ZBrush、Marmoset Toolbag、Substance Painter 等等。它们都很棒,但在用户体验、性能、特性、兼容性、价格等各种标准上有差异。

这节课我们会用 Blender,因为它是免费的、性能出色、能用于所有主流操作系统、有很多特性、有庞大的社区,而且自 2.8 版本以来变得容易多了。

注意,课程结束时你不会成为 Blender 专家。要学完它所有的方面需要一整套课程,而且已经有很多很棒的学习资源了。我们的目标是理解基础、揭开这个软件的神秘面纱,从而拥有足够的知识储备来创建简单的模型。

开始时我们会探索所有基础。那会有很多东西要吸收,但别担心;我们会多次重复大部分快捷键、机制和特性。

如果你在某个时刻按错了快捷键、弄丢了场景、或者界面完全乱了,只要关闭再重新打开 Blender 就好。

下载 Blender

去 Blender 网站下载页面下载最新版本:https://www.blender.org/download/

这个软件相当轻量,应该不用几分钟。

下载完成后,直接安装它。

这节课是用 Blender 2.83.5 编写和录制的。虽然不应该有重大差异,但要留意潜在的变化。

界面

启动画面

启动画面让你可以访问一些有用的链接、模板和最近打开的文件。

这张图片会随 Blender 版本变化,所以如果你的不一样,别惊讶。

你也能在它的右上角看到确切的版本。

点击启动画面外的任何地方来关闭它。

区域(Areas)

界面的不同部分叫做区域(areas)。区域非常灵活,你可以创建你想要的布局。

默认区域

默认情况下,你有主区域,叫做 3D Viewport:

Timeline(时间轴)用来创建动画:

Outliner(大纲)用来查看和管理场景图(或场景树):

Properties(属性)用来管理活动对象(选中项)和环境的属性:

更改区域

要更改一个区域显示的内容,点击那个区域左上角的按钮。这里,我们要更改 Timeline 区域。

我们要把 Timeline 区域改成另一个 3D Viewport:

调整区域大小

要调整一个区域的大小,把光标放在两个区域之间然后拖放:

创建新区域

要创建一个新区域,首先,我们必须决定要分割哪个区域。然后,我们必须把光标放在这个区域的四个角之一(区域内部几像素处):

最后,我们拖放到想要分割的区域里:

移除区域

移除一个区域有点棘手,你可能会弄出一堆不需要的区域。别担心,一旦你理解了思路,就没问题了。

某种程度上,我们不是移除一个区域;我们是取消两个区域的拆分。首先,你必须决定两个区域中哪个会接管另一个。如果你想移除右边的区域,就从左边的区域开始。然后把光标放在与被移除区域相邻的两个角之一(应该接管另一个的那个区域内部几像素处):

然后拖放(就像我们创建区域时那样),但这一次是朝相反的方向(朝我们想移除的区域):

可能要试几次,但你会掌握的。

快捷键

Blender 的优势之一是它的快捷键。它们有很多,一旦你掌握了基础,你就能非常高效。别担心;你可以通过界面或我们稍后会看到的搜索面板来使用所有快捷键操作。整节课里,我们会探索一些更关键的快捷键。

这里有一份不完全的快捷键列表:https://docs.google.com/document/d/1wZzJrEgNye2ZQqwe8oBh54AXwF5cYIe56EGFe2bb0QU/edit?usp=sharing

要理解的一件重要事情是,快捷键是悬停区域敏感的。这意味着同一个快捷键根据我们光标后面是哪个区域会有不同的操作。这节课我们会看到的大部分快捷键都涉及 3D Viewport。按快捷键时,你应该始终确保光标在这些区域之一的上方。

快捷键也是模式敏感的,但我们稍后会谈到模式。

我们会看到只有一两个快捷键在 Mac 和 Windows 之间有差异。如果有差异,两个版本都会被提及。如果快捷键包含 CTRL 键而你在用 Mac,不要以为它是 CMD。要用 CTRL 键。

视图

正如你看到的,你能朝各个可能的方向移动视图。虽然你可以用触控板,但出于效率原因,我推荐用带可按下滚轮(或第三个按键)的鼠标。从现在起,我们把滚轮键(我们能按下的那个)称为 MIDDLE MOUSE(鼠标中键)。

如果你用触控板,可以用两根手指。

如果你用 Magic Mouse,你可以模拟 MIDDLE MOUSE。通过 Edit > Preferences 进入偏好设置。用左侧的导航菜单,选择 Input 部分。勾选 Emulate 3 Button Mouse 复选框。

有数字小键盘也更好。

环绕旋转(Orbit rotate)

我们可以通过按住 MIDDLE MOUSE 并在 3D Viewport 里拖放来旋转视图。

或者我们可以用每个 3D Viewport 右上角的小控件(gizmo):

我们把这个旋转叫做环绕(orbit,像 Three.js 的 OrbitControl),因为视图围绕一个看不见的中心旋转,这个中心叫做视点(view-point)。我们稍后会谈到那个点。

平移与升降(Truck and pedestal)

Truck 是视图左右移动,而 pedestal 是视图上下移动。我们可以同时做这两个动作,方法是再次按住 MIDDLE MOUSE,但这次同时按住 SHIFT 键。

或者我们可以用右上角的手形图标:

Truck 也被叫做 track。

有些人也可能错误地把这些移动叫做"pan"(平移)。

推拉(Dolly)

Dolly 是视图前后移动。我们可以用 WHEEL(滚轮)做到这一点。

或者我们可以用右上角的放大镜图标:

不过要小心;缩放不太等于前后移动。我们在靠近或远离我们在Orbit部分谈到的视点,但我们不能让缩放越过那个点,缩放太多会导致视图卡住。

要解决这个缩放限制问题,我们可以通过按住 SHIFT + CTRL + MIDDLE MOUSE 并在 3D Viewport 里拖放来前后移动(用触控板的两指技巧不管用)。这样,我们就不会卡在视点处。

界面里没有图标能做这个。

倾斜与摇移(Tilt and pan)

Tilt 和 pan 是绕相机点做的简单旋转。

我们必须进入 Walk 模式——也叫 Fly 模式——来使用这些动作。

要做到这一点,如果你用 QWERTY 键盘,按 SHIFT + BACK QUOTE。反引号(back quote)——也叫 backtick、acute 或左引号——是一个倾斜的单引号,可以用来加一个沉音符(grave accent)。

找到那个字符可能有点难,因为它的位置根据你的键盘变化很大。你能在右上角、左下角、或者非常靠近 ENTER 键的地方找到它。

如果你用 AZERTY 键盘,这个快捷键不管用。我们需要改变键位映射。通过 Edit > Preferences 进入偏好设置。用左侧的导航菜单,选择 Keymap 部分。在搜索输入框里,输入 view navigation,并把 View Navigation (Walk/Fly) 的快捷键改成 SHIFT + F。

就这样,你可以用 SHIFT + F 使用 walk 模式。

你也可以在 walk 模式里用 ARROWS 方向键或——如果你用 QWERTY 的话——WASD 来前进、后退和向两侧移动。

透视 / 正交

默认视图用透视。我们可以用 NUMPAD 5 或右上角的网格图标切换到正交版本:

坐标轴

我们可以通过按 NUMPAD 1、NUMPAD 3 和 NUMPAD 7 把相机对齐到 X、Y 和 Z 轴。我们说的是数字小键盘上的数字,不是键盘顶部的数字。

要把相机放到相反的一侧,按同样的键但要加上 CTRL。

或者我们可以用小控件并点击这些轴:

在 Blender 里,我们把朝上的轴当作 Z,而不像在 Three.js 里那样是 Y。

相机

你可能在 3D Viewport 里看到过相机。要获得相机视角,按 NUMPAD 0:

做渲染时会用到相机。没有相机你就不能渲染场景。

重置

有时候,我们迷路了,甚至不知道我们的场景在哪里。我们可以通过按 SHIFT + C 重新聚焦到我们的场景。

聚焦

要把相机聚焦到一个物体上,用 LEFT MOUSE 选中物体,然后按 NUMPAD ,(我们说的是数字小键盘上的逗号,根据你用的键盘它可能是一个点)。

我们也可以聚焦到一个物体并用 NUMPAD / 隐藏其他所有东西。用同样的快捷键离开聚焦模式。

选择

正如我们刚看到的,我们可以用 LEFT MOUSE 选中物体。我们也可以用 SHIFT + LEFT MOUSE 选中多个物体。

你可能注意到了,其中一个物体总是有更亮的轮廓。这个物体不只是被选中;它还是活动(active)对象。我们稍后会看到更多关于它的内容。

要撤销一个选择,按 CMD + Z(Windows 上是 CTRL + Z)。是的,选中物体被视为一个我们可以撤销的动作。虽然这看起来奇怪,但当你点错的时候它真的很有用。

要取消选中一个物体,再次用 SHIFT + LEFT MOUSE。如果它不是活动对象,它会变成活动对象;如果它是活动对象,它会被取消选中。

要全选,按 A。

要取消全选,按两次 A。

要选中一个矩形区域,按 B。

要像画画一样选择,按 C。在这个模式里,用 WHEEL 改变半径。

创建物体

要创建物体,把光标放在 3D Viewport 上方,按 SHIFT + A。一个菜单应该在光标后面打开。浏览这个菜单来创建各种物体。课程里我们会看到的大部分都在 Mesh 子菜单里:

当你创建一个物体时,左下角应该出现一个小按钮:

点击它来更改各种属性,比如大小、细分,以及很多与你正在制作的物体相关的其他属性:

如果你点击其他任何地方,你会丢掉那个菜单。你可以用 F9 重新打开它,但如果你开始对几何体做修改,你就没法再打开这个菜单了。

删除物体

要删除一个物体,选中它,并把光标放在 3D Viewport 上方,按 X。一个确认菜单应该在光标后面打开。点击它来删除物体:

隐藏物体

要隐藏选中的物体,按 H。

要显示隐藏的物体,按 ALT + H。

要隐藏未选中的物体,按 SHIFT + H。

你也可以在 Outliner 里用眼睛图标管理这个。

变换物体

有 3 种变换——和 Three.js 里一样。我们能改变位置、旋转和缩放。

我们可以用左侧的菜单分别激活每一种,甚至用第四个按钮把它们全部一起激活:

或者我们可以用快捷键:

激活这些快捷键之一后,你可以通过按对应的键(X、Y 和 Z)强制变换在特定的轴上操作。

模式

我们目前处于 Object Mode(物体模式),在这里我们能创建、删除和变换物体。还有很多其他模式。

切换模式

我们可以用任何 3D Viewport 区域左上角的选择按钮里的菜单来更改模式:

或者我们可以按 CTRL + TAB 打开一个轮盘菜单(也就是最酷的一种菜单):

我们不会覆盖所有模式,但我们会用到 Edit Mode(编辑模式)。选中一个 mesh(或创建一个),并切换到 Edit Mode。

编辑模式

其实有一个快捷键可以切换 Edit Mode。只要按 TAB。

Edit Mode 和 Object Mode 非常相似,但我们可以编辑顶点、边和面。默认情况下,我们能改变顶点。试着选中顶点,用平常的快捷键变换它们——G 表示位置,R 表示旋转,S 表示缩放。

要切换到边和面,我们可以用 3D Viewport 右上部分的按钮:

或者我们可以按键盘顶部的头三个数字 1、2 和 3。

一旦你完成了编辑物体,用 TAB 离开 Edit Mode。

着色(Shading)

Shading 是你在 3D Viewport 里看物体的方式。

我们目前处于 Solid 着色。这种着色让你用一个默认材质、不支持灯光的方式看物体。它性能好又方便。

我们可以用 3D Viewport 右上角的按钮改变着色:

或者我们可以按 Z 打开一个轮盘菜单:

如果你在 Render 里看不太清,可能是因为你场景里的灯光不够。只要按 SHIFT + A 打开 Add 菜单添加一两个。

属性

除非你改了布局,右下角的区域,名为 Properties,让你操作渲染属性、环境属性和活动对象的属性。记住活动对象就是轮廓最亮的那个。

我们不会覆盖所有这些标签页,但顶部那些处理渲染和环境:

下面那些与活动对象相关,而且它们可能根据活动对象的类型而不同,因为一个立方体和一个灯光没有一样的属性:

物体属性

Object Properties 让你精确地改变像变换这样的属性:

修改器属性

Modifiers Properties 让你添加我们所说的修改器(modifiers)。这些是非破坏性的修改。你可以细分、弯曲、放大、缩小等等,并随意关掉它们:

材质属性

Material Properties 让你操作材质:

默认情况下,你能访问一个名为 Material 的材质,如果你没删除默认立方体的话,它应该被应用在那个立方体上:

你可以用 - 按钮移除材质,用 + 按钮组合它们,但我们通常每个 mesh 只用一个材质:

如果 mesh 上没有材质,我们可以选一个已有的,或者用 New 按钮创建一个新的:

一个材质可以有不同类型的表面。默认的那种叫做 Principled BSDF,这类表面像 Three.js 里的 MeshStandardMaterial 那样使用 PBR 原理。这意味着如果我们把这种材质导出到一个 Three.js 场景里,我们应该会得到非常相似的结果。

这节课我们不会看其他类型的材质。

渲染引擎

去 Render Properties 标签页:

在这个面板里,我们能改变 Render Engine:

有 3 种渲染引擎:

你可以改变这个属性,看看场景里有没有变化。确保用 Renderer 着色——按 Z 改着色。Blender 开发者在让不同渲染引擎之间保持非常相似的结果方面做得非常出色。

默认的是 Eevee,它在我们的情况里很完美,因为它是实时渲染,而 Three.js 也是实时渲染。

如果你想渲染场景,按 F12。渲染会从相机视角进行——确保场景里有一个朝向好的相机。

搜索

有太多可能的操作,我们记不住怎么触发它们所有。当我们搞不清按钮在哪、或者快捷键是什么时,正确的解决方案是用 Search 面板。

要打开 Search 面板,按 F3(根据你的键盘和操作系统,你可能需要加上 fn 键),然后写上操作名:

保存我们的设置

创建一个扎实的设置。由你决定,但因为我们在用 Blender 为 Three.js 导出,我们不需要相机。我们也可以在 Z 和 Y 轴上、主 3D Viewport 下面创建两个使用 Wireframe 着色的侧视图:

一旦你对你的设置满意,去 File > Defaults > Save Startup File。那会把你的当前设置设为打开 Blender 时的默认设置:

点击 Save Startup File 时要小心;一个确认菜单应该打开,如果你把鼠标移出它,你会丢掉它。再点一次来确认:

汉堡时间

是时候创建我们自己的模型了。这节课,我们要做一个汉堡,并把它导入 Three.js。

就像在 Three.js 里一样,一个好习惯是决定一个单位尺度。如果你看网格,一个格子确实代表一个单位,而且默认情况下,Blender 认为一个单位意味着一米:

我们可以做一个巨型汉堡,但抱歉,我们最好从一个普通尺寸的三明治开始。我们可以就把 1m 当作 1cm,但如果你不喜欢看到这个 m,你可以在 Properties 区域的 Scene Properties 标签页里,把 Unit System 选为 None 来移除它:

我们现在可以把 1 当作 1cm。

底部面包

对于我们的底部面包,虽然听起来可能很奇怪,我们会从一个 10cm 的立方体开始:

然后,在确保我们的立方体是活动对象之后,去 Modifier Properties 标签页并添加 Subdivision Surface 修改器:

立方体现在有点像一个球体了。

Subdivision Surface 是最著名的修改器之一。它细分几何体,但同时让角度变平滑。

在 Subdivisions > viewport 字段里添加更多细分:

面是平的,但我们想要一个平滑的表面。要做到这一点,右键点击这个球体,选择 Shade Smooth:

修改器的好处是你可以保留原始几何体。按 TAB 进入 Edit Mode,移动顶点,直到你在紧贴地面之上得到一个鹅卵石:

所以它还不是一个面包。要得到正确的形状,我们必须在面包的边缘添加更多顶点。我们需要的是循环切割(loop cut)。在 Edit Mode 里按 CTRL + R,并把鼠标移到四条垂直边之一上:

点击一次创建这个切割,但不要再点。此时,你能上下移动这个循环切割。把这个循环切割放得离顶部边缘更近:

对面包的下半部分重复这个流程。我们想要我们的面包底部是平的,但不要太扁:

改进你的面包直到你满意,但别在上面花太多时间。别担心,等我们有了整个场景后会回来处理它的。

保存

是时候保存了。按 CMD + S(Windows 上是 CTRL + S)或者去 Files > Save:

保存到你想保存的任何地方。

如果你做了些修改并再次保存,你会在与原始 .blend 文件相同的文件夹里看到一个 .blend1 文件。那是 Blender 自动生成的上一次保存的备份。曾经有一段时间 Blender 不像今天这么稳定。保存你的文件可能导致它损坏。这就是他们创建那些自动备份的原因。今天,Blender 非常稳定,但他们保留这个备份,以防万一,或者因为用户可能犯错,比如删除一个物体、保存、然后关闭 Blender。幸运的是,你只需要把 .blend1 文件重命名为 .blend 就能访问你之前的保存。

肉饼

对肉饼重复同样的流程。你也可以在 Object Mode(默认的那个)里用 SHIFT + D 复制底部面包

别忘了保存。

芝士

对于芝士,从一个正好在肉饼上方的平面开始:

进入 Edit Mode(在那里你能编辑顶点、边和面),细分几何体。选中唯一的面,右键点击它并选择 Subdivide。把 Number of Cuts 设为 10:

我们要把芝士的角融化。

当我们还在 Edit Mode 里时,选中芝士的一个角。如果我们一次移动一个顶点,那会花太长时间,而且结果大概看起来很让人失望。我们能做的是使用 Proportional Editing(比例编辑)。按 O——字母 O——或者点击 3D Viewport 顶部中间的图标:

现在 Proportional Editing 已激活,变换一个顶点也会变换相邻的顶点。在按下一个变换键——比如 G 移动——之后,用 WHEEL 增大影响范围:

相邻顶点移动的方式不正确。要改变这个,点击 Proportional Editing Falloff 图标并选择 Sharp:

现在操作顶点和 Proportional Editing 的大小,直到你得到一个好看的芝士形状:

在 Object Mode 里,右键点击并选择 Shade Smooth 得到一个平滑的表面:

我们的芝士看起来不够厚。要解决这个,去 Modifier Properties 添加 Solidify 修改器:

然后把厚度增加到 0.08:

如果你想更好地欣赏结果,把着色改成线框——按 Z 打开着色轮盘菜单:

不是想显得太挑剔,但边缘上的 Shade Smooth 看起来有点奇怪:

修复这个问题的方法因我们使用的 Blender 版本而异。有多个方式找到版本号。

当你启动 Blender 时,你会在启动画面的右上角看到这个数字:

而如果 Blender 已经打开,你可以点击最左上角的 Blender 图标,选择 Splash Screen 来显示启动画面,或者选 About Blender 查看更多细节:

如果你的版本是 4.0.0 或更高,在 Object Mode 里,选中芝士,右键点击它并选择 Shader Smooth by Angle:

如果你的版本低于 4.0.0,选中芝士,去 Object Data Properties 面板,然后 Normals 部分,勾选 Auto Smooth:

在两种情况下,表面都会是平滑的,但在尖锐的角度上不是。到那个阶段,你应该得到一块逼真又诱人的融化芝士:

顶部面包

像我们为底部做的那些那样添加顶部面包,但让它更圆:

最后调整

现在我们有了所有配料,我们可以修正比例,回到之前的配料,改进整体形状。

别忘了保存。

材质

是时候给我们的汉堡添加一些颜色和表面属性了。出于简单的原因,我们不会应用纹理或使用绘画。

我们需要 3 个材质——一个给面包,一个给肉饼,一个给芝士。

选中底部面包,去 Material Properties 面板:

你的面包上应该没有关联的材质。如果你有一个,点击它并按 - 按钮。

要创建一个新材质,点击 New 按钮:

重命名材质是个好习惯。双击它的名字,叫它 BunMaterial:

现在,调整属性得到一个美味的颜色。我们只需要改变 Base Color 和 Roughness:

如果你在 3D Viewport 上看不到颜色,可能是因为你没有用合适的着色。要改着色,按 Z 并选择 Renderer:

如果汉堡看起来非常暗,大概是灯光的原因。选中灯光,把它放到离汉堡更远一点的位置,去 Object Data Properties 面板,把它的功率增加到 5000:

对肉饼和芝士重复材质流程:

对于顶部面包,你只需要选中你已经在做的 BunMaterial:

慢慢来,删除并再试,直到你得到一个看起来很美味的汉堡。

你甚至可以添加其他配料,比如沙拉、番茄,如果你是那种人的话也许加一片腌黄瓜——但到底有人喜欢腌黄瓜吗?

别忘了保存。

导出

终于到导出我们汉堡的时候了。下载并运行初始项目。Three.js 场景已经准备好了,唯一剩下的就是提供模型。

选中汉堡的所有配料。如果你选中了像灯光或相机这样的其他元素,你可能会把它们也导出。那可能有用,但在我们的情况里不需要。

去 File > Export > glTF 2.0 (.glb/.gltf):

一个面板应该在屏幕中间打开。用它导航到项目的 /static/models/ 文件夹(如果你看到 .gitkeep 文件就忽略它)。

在面板的底部,为你的文件选一个名字。我们会用 hamburger。不要加扩展名:

在右侧部分,我们能选择 Format。这些选项对应我们在上一节课谈到的 GLTF 格式。我们会用 glTF Binary,因为我们没有任何纹理,而且我们想要尽可能小的文件:

对于其余的属性,这里是设置:

大部分都很明显,但这里是列表

点击 Export glTF 2.0 并检查文件。文件大小应该相当轻。试着导出同一个汉堡但不用 compression,它应该大得多。在一个真实项目里,这就是你必须在用压缩版本、赢得几个 kB 加载整个 Draco 解码器、还是用未压缩版本之间做决定的时候。

只要我们有了文件,就无所谓了。

在 Three.js 里测试

运行项目,如果需要就更改汉堡路径:

gltfLoader.load(
    '/models/hamburger.glb',

// ...

你应该在你的 Three.js 场景里看到你的汉堡。

继续深入

有超多很棒的在线教程,大部分都是免费的。这里有一份你可以使用的不完全资源列表:

确保始终跟着使用至少 2.8 版本 Blender 的教程。